<template>
  <div class="role">
    <div class="search">
      <el-button type="primary" size="small" @click="editRef.drawer=true">添加</el-button>
    </div>
    <el-table size="small" :data="roles" style="width: 98%">
      <!-- <el-table-column prop="id" label="编号" width="100" /> -->
      <el-table-column prop="hotelName" label="酒店名称" width="100" />
      <el-table-column prop="city" label="城市" width="100" />
      <el-table-column prop="starRating" label="星级" width="100" />
      <el-table-column prop="description" label="描述" width="150" />
      <el-table-column prop="imageUrl" label="图片" width="150" >

      <template #default="scope">
          <el-image v-if="scope.row.imageUrl" style="width: 60px; height: 60px" :src="scope.row.imageUrl" fit="cover" />
          <el-image v-else style="width: 60px; height: 60px" src="imgs/default.png" fit="cover" />
        </template>

      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 5px;" small background layout="prev, pager, next"
    :total="roles.length" v-model:current-page="pageIndex" />
    <EditRole ref="editRef" @sync-list="loadRoles"></EditRole>
  </div>
</template>

<script setup lang="ts">

import {onMounted,ref,computed}from 'vue'
import {$list,$getOne,$delete}from '../../api/role.js'
import {deletehotle}from '../../utils/request.js'
import EditRole from '../../components/user/EditRole.vue'
import { ElMessageBox,ElNotification } from 'element-plus'

let roles =ref([])

 let pageIndex= ref(1)

const loadRoles=async()=>{
  console.log(1111);

  let ref =await $list()


  roles.value=ref.data.hotel.records
  console.log(roles);
}
let showRoles = computed(()=>{
  return roles.value.slice((pageIndex.value-1)*10,pageIndex.value*10)
})


// 表单数据
let formData = ref({
  id: "",
  hotelName: "",
  city: "",
  starRating: 0,
  description: "",
  imageUrl: "",
  page: 0,
  size: 0
})




//删除方法
const handleDelete=(roleId)=>{
    ElMessageBox.confirm(
    '确定删除吗？',
    '系统提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(async () => {

         formData.value.id=roleId
         console.log(formData.value);
      let ret= await $delete(formData.value)
         console.log(ret.data.code);
          if(ret.data.code==200){
          ElNotification({
            title: '提示',
            message: ret.data.message,
            type: 'success',
          })
          //重新加载
          loadRoles()

        }else{
          ElNotification({
            title: '提示',
            message: ret.data.message,
            type: 'error',
          })
        }
  })
  .catch(() => {})

}
//定义编辑组件ref对象
let editRef =ref(null)

//编辑方法
const handleEdit= async (roleId)=>{
    console.log(roleId)

    formData.value.id=roleId
    formData.value.page=1
    formData.value.size=1
    let ret =await $getOne(formData.value)
    console.log(ret)

    editRef.value.formData = ret.data.hotel.records[0]
    editRef.value.drawer = true


}


onMounted(()=>{
  loadRoles()
})
</script>

<style lang="scss" scoped>
.search{
  margin-bottom: 5px;
}

</style>
